<template>
    <div>
        <!-- 搜索框 -->
        <search></search>
        <!-- 轮播图组件 -->
        <swipe :images="images" imgheight="200px" imgwidth="100%"></swipe>
        <!-- 导航区域 -->
        <van-grid :column-num="4">
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
            <van-grid-item v-for="item in catitemsApiData" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <!-- 秒杀区域 -->
        <div class="kill" v-show="kill">
            <p>京东秒杀倒计时 <b style="color: red;">{{ time }}</b>秒 发现好货</p>
            <img src="./../../../img/ms.png" alt="" style="width: 100%;">
        </div>
    </div>
</template>

<script setup>
// 轮播图组件引入
import swipe from '@/components/swipe.vue';
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
// 导航区域渲染
import { catitemsApi } from '@/api/api';
import { ref } from 'vue';
let catitemsApiData = ref([])
catitemsApi().then((res) => {
    console.log(res);
    catitemsApiData.value = res.data.message
})
// 秒杀区域
let kill = ref(true)
let time = ref(30)
let t
t = setInterval(() => {
    time.value--
    if (time.value == 0) {
        clearInterval(t)
        kill.value = false
    }
}, 1000)
// 搜索框组件引入
import search from '@/components/search.vue';
</script>

<style lang="scss" scoped>
.kill {
    width: 100%;
}
</style>